
import { Navigate,useRoutes } from 'react-router-dom'
import Login from '../component/Login'
import Main from "../component/Main";
import NotFind from '../component/404';
import Home from "../component/Main/Home";
import About from "../component/Main/About";

 const routes = [
    {
        path:"/login" ,
        element:<Login />
    },
    {
        path:"/main",
         element:<Main />, 
         children:[
            {
                path:"/main/home",
                element:<Home/>,
            },
            {
                path:"/main/about",
                element:<About />,
            },
         ]
    },
    {
        path:"/",
         element:<Navigate to="/login" />
    },
    {
        path:"*" ,
        element:<NotFind />
    },
]

// export const getRoutesList= ()=>{
//     return useRoutes(routes)
// }
// 出现报错：React Hook "useRoutes" 在函数 "getRoutesList" 中被调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数。 React 组件名称必须以大写字母开头。 React Hook 名称必须以“use”开头

// 解决方法1：将该函数变成组件的形式
// export const GetRoutesList= ()=>{
//     return useRoutes(routes)
// }

// 解决方法2：自定义一个React Hook  在hooks中可以使用hook
export const useMyRoutes= ()=>{
    return useRoutes(routes)
}